<template>
  <div class="ac-card-box">
    <div class="ac-card-top" :style="{background: cards.color}">
      <div class="card">{{ cards.model }}</div>
      <div class="card">{{ cards.distance}}</div>
      <div class="card">{{ cards.num }}</div>
    </div>
    <div class="ac-card-bottom" v-if="cards.children && cards.children.length>0">
      <div class="rank-box" v-for="(item, index) in cards.children" :key="index">
        <div class="rank" :class="{first: index==0}">{{ item.rank }}</div>
        <div class="name" @click="clickName(item)">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AchivementCard",
  props: ["cards"],
  methods: {
    clickName(item) {
      this.$emit("getName", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.ac-card-box {
  box-shadow: 0px 0px 7px 1px #e3e3e3;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  .flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ac-card-top {
    background-color: #f60;
    @extend .flex-center;
    padding: 15px;
    .card {
      padding: 2px;
    }
  }
  .ac-card-bottom {
    // background: #f0f;
    padding-top: 15px;
    @extend .flex-center;
    .rank-box {
      display: flex;
      margin-bottom: 12px;
      .rank {
        border-radius: 50%;
        width: 18px;
        height: 18px;
        line-height: 18px;
        margin-right: 12px;
        background: #d7d7d7;
        text-align: center;
        border: 1px solid #d7d7d7;
        color: #7c7c7c;
      }
      .first {
        background: #c3bfbd;
        color: #ff5050;
        border: 1px solid #ff5050;
      }
    }
  }
}
</style>
<style>
.cards {
  justify-content: space-around;
  margin-top: 37px;
}
</style>